import React,{memo} from 'react';
import { Route, Switch,Redirect} from "react-router-dom";
//引入redux相关
import {shallowEqual, useSelector} from 'react-redux';


// import Frame from './components/Frame';
import Frame from './components/Frame/testIndex';

import {adminRourts} from "./router";

export default memo(function App() {
    //在这里需要根据state判断是否进行登录，如果没有登录，则跳转到登录页面
    const user = useSelector(state => state.user, shallowEqual)
    // console.log(user);
    const {isLogin, role} = user;
    // console.log(isLogin);

    return (
        isLogin ? 
        <Frame>
            <Switch>
                {
                    adminRourts.map(route => {
                        return (
                            <Route
                                path={route.pathname}
                                key={route.pathname}
                                exact={route.exact}
                                render={(routerProps) => {
                                    // console.log(route);
                                    // console.log(route.role);
                                    // console.log(role);
                                    // console.log(route.role.includes(role));
                                    const hasPermission = route.role.includes(role);
                                    return hasPermission ? <route.component {...routerProps}/> : <Redirect to='/admin/noauth'/> ;
                                }}
                            />
                        )
                    })
                }
                <Redirect to={adminRourts[0].pathname} from='/admin' exact/>
                <Redirect to="/404" />
            </Switch>
        </Frame>
        : <Redirect to='/login'/>
    )

})